<template>
  <div>
    <!-- 评论区域 -->
    <div class="comment">
      <div class="comment-title">
        <h3>发表评论</h3>
      </div>
      <div class="comment-text">
        <textarea placeholder="请输入要评论的内容..." v-model="val"></textarea>
      </div>
      <div class="btn">
        <div class="mui-btn mui-btn-primary" @click="comment">
          发表评论
        </div>
      </div>
      <div class="comment-list">
        <div class="comment-item" v-for="item in commentList" :key="item.id">
          <div class="comment-detail">
            <span>第{{item.floor}}楼</span>
            <span>用户:{{item.user}}</span>
            <span>发表时间:{{new Date() | dateFormat}}</span>
          </div>
          <div class="comment-content">
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    Toast
  } from "mint-ui";
  export default {
    data() {
      return {
        val: "",
        floor: 3,
        commentList: [{
            id: 1,
            floor: 1,
            user: "shaoyanan",
            add_time: "2018-01-24",
            content: "文章不错!"
          },
          {
            id: 2,
            floor: 2,
            user: "小雅",
            add_time: "2017-06-24",
            content: "不错！"
          }
        ]
      };
    },
    methods: {
      comment() {
        if (!this.val) {
          Toast("评论内容不能为空！");
        } else {
          var newComment = {
            floor: this.floor++,
            user: "xiaoxiao",
            add_time: new Date(),
            content: this.val
          };
          this.commentList.push(newComment);
          this.val = "";
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .comment-title h3 {
    border-bottom: 1px solid #ccc;
    font-weight: 400;
    font-size: 18px;
    color: red;
    border-top: 1px solid #ccc;
    padding: 10px 0;
  }

  input[type="submit"],
  .mui-btn-primary,
  .mui-btn-blue {
    width: 100%;
    height: 40px;
    line-height: 27px;
  }

  .comment-text textarea {
    margin-bottom: 0;
  }

  .comment-list {
    margin-top: 10px;
  }

  .comment-detail {
    padding: 10px;
    background-color: #ffc10724;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .comment-content {
    padding-top: 10px;
    background-color: #9c27b02b;
  }
</style>